import Vue from 'vue'
import Vuex,{Store} from 'vuex'
import axios from 'axios'
import {v4} from 'uuid'

Vue.use(Vuex)

export default new Store({
  actions:{
    // 添一个加人
    addPerson(context,value){
      // 最多添加6个人
      if(context.state.persons.length < 6){
        context.commit('ADD_PERSON',value)
      }else{
        alert('最多只能添加6个')
      }
    },
    // 添一个图片
    getPicture({commit}){
      axios.get('https://api.uomg.com/api/rand.img3?sort=%E8%83%96%E6%AC%A1%E7%8C%AB&format=json').then(
        response => {
          console.log('成功',response.data.imgurl)
          // 把人包装成一个对象
          let obj = {id:v4(),url:response.data.imgurl}
          // 联系GET_PICTURE添加一个人
          commit('GET_PICTURE',obj)
        },
        error => {
          alert(error.message)
        }
      )
    }
  },
  mutations:{
    // 添加人
    ADD_PERSON(state,value){
      state.persons.unshift(value)
    },
    // 添加图片
    GET_PICTURE(state,value){
      state.pictures.unshift(value)
    }
  },
  state:{
    persons:[
      {id:'asdtratry01',name:'晶晶',age:18},
      {id:'asdtratry02',name:'强哥',age:19},
    ],
    pictures:[
      {id:'asfdtr01',url:'http://49.232.112.44/images/hot.jpg'},
      {id:'asfdtr02',url:'http://49.232.112.44/images/cool.jpg'}
    ]
  },
  getters:{}
})
